<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Terry Zeng</title>

    <!-- Bootstrap Core CSS -->
    <link href="lib/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="lib/font-awesome-4/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/font.css" rel="stylesheet" type="text/css">
    <link href="lib/bdialog/b.dialog.bootstrap3.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="../lib/support/html5shiv.js"></script>
        <script src="../lib/support/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <a id="menu-toggle" href="javascript:void(0);" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
    <nav id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand"><a href="#top" >Terry Website</a></li>
            <li><a href="#top" >首页</a></li>
            <li><a href="#about" >关于</a></li>
            <li><a href="#services" >作品展示</a></li>
            <li><a href="#contact" >联系方式</a></li>
        </ul>
    </nav>

    <!-- Header -->
    <header id="top" class="header">
        <div class="text-vertical-center">
        	<h1 style="margin-right: 300px;">I can accept failure. </h1>
            <h1 style="margin-left: 200px;">But I can't accept not trying.</h1>
            <h3 class="subTitle">—— Michael Jordan</h3>
            <br>
            <a href="#about" class="btn btn-dark btn-lg"><i class="fa fa-arrow-down"></i> 查看作品集</a>
        </div>
    </header>

    <!-- About -->
    <section id="about" class="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>什么是开源？</h2>
                    <p class="lead">有人创造了一个东西，然后拿出来，分享给大家，大家觉得不错，关注并使用，开源就是这么简单！</p>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <!-- Services -->
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
    <section id="services" class="services bg-primary">
        <div class="container" style="z-index: 1;">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 works-area">
                    <h2 class="text-center">作品展示</h2>
                    <hr class="small">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-list-alt fa-stack-1x "></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>SelectPage</h3>
                                    <p class="text-left">简洁而强大的下拉分页选择插件，带有autocomplete、tag标签选择、分页展示、i18n国际化支持、键盘快捷操作等功能</p>
                                    <p>
                                        <!-- github官方提供的按钮方式 -->
                                        <!--
                                        <a class="github-button" href="https://github.com/TerryZ/SelectPage" data-icon="octicon-star" data-show-count="true" aria-label="Star TerryZ/SelectPage on GitHub">Star</a>
                                        <a class="github-button" href="https://github.com/TerryZ/SelectPage/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork TerryZ/SelectPage on GitHub">Fork</a>
                                        -->
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=SelectPage&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=SelectPage&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                    </p>
                                    <a href="https://terryz.oschina.io/selectpage/index.html" class="btn btn-light" target="_blank"><i class="fa fa-navicon"></i> 查看更多信息</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-bars fa-stack-1x "></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>SelectMenu</h3>
                                    <p class="text-left">简洁、易用、多样的菜单解决方案。包含常规菜单模式，高级菜单模式（带有autocomplete、数组分组Tabs展示等高级功能），嵌入网页模式，右键呼出菜单等模式</p>
                                    <p>
                                        <!-- github官方提供的按钮方式 -->
                                        <!--
                                        <a class="github-button" href="https://github.com/TerryZ/SelectPage" data-icon="octicon-star" data-show-count="true" aria-label="Star TerryZ/SelectPage on GitHub">Star</a>
                                        <a class="github-button" href="https://github.com/TerryZ/SelectPage/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork TerryZ/SelectPage on GitHub">Fork</a>
                                        -->
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=SelectMenu&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=SelectMenu&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                    </p>
                                    <a href="https://terryz.oschina.io/selectmenu/index.html" class="btn btn-light" target="_blank"><i class="fa fa-navicon"></i> 查看更多信息</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.row (nested) -->

                    <div class="row" style="margin-top: 10px">
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-window-restore fa-stack-1x "></i>
                                    </span>
                                </div>

                                <div class="item-content col-md-9">
                                    <h3>bDialog</h3>
                                    <p class="text-left">基于Boostrap Modal功能增强、扩展的可多层嵌套，高定制化的弹出窗口，包含 Modal模态窗口、Alert消息对话框、Mask遮罩三种模式</p>
                                    <p>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bDialog&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bDialog&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                    </p>
                                    <a href="https://terryz.oschina.io/bdialog/index.html" class="btn btn-light" target="_blank"><i class="fa fa-navicon"></i> 查看更多信息</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-caret-square-o-right fa-stack-1x"></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>bPage</h3>
                                    <p class="text-left">基于jQuery、Bootstrap2、3进行开发，支持页面跳转、异步页面、异步数据等多模式的独立分页插件</p>
                                    <p>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bPage&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bPage&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                    </p>
                                    <a href="https://terryz.oschina.io/bpage/index.html" class="btn btn-light" target="_blank"><i class="fa fa-navicon"></i> 查看更多信息</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="service-item">
                                <div class="item-icon col-md-3">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-folder-o fa-stack-1x"></i>
                                    </span>
                                </div>
                                <div class="item-content col-md-9">
                                    <h3>bTabs</h3>
                                    <p class="text-left">以多标签页载入页面的功能插件，可让Bootstrap的UI界面变成类似EXT，EasyUI之类的操作模式</p>
                                    <p>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bTabs&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bTabs&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                    </p>
                                    <a href="https://terryz.oschina.io/btabs/index.html" class="btn btn-light" target="_blank"><i class="fa fa-navicon"></i> 查看更多信息</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <div class="bg-icon"></div>
        <!-- /.container -->
    </section>


    <!-- Call to Action -->
    <aside class="call-to-action">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center funnyBox">
                    <i class="fa fa-arrow-up fa-3x" id="inputBtn1"></i>
                    <i class="fa fa-arrow-up fa-3x" id="inputBtn2"></i>
                    <i class="fa fa-arrow-down fa-3x" id="inputBtn3"></i>
                    <i class="fa fa-arrow-down fa-3x" id="inputBtn4"></i>
                    <i class="fa fa-arrow-left fa-3x" id="inputBtn5"></i>
                    <i class="fa fa-arrow-right fa-3x" id="inputBtn6"></i>
                    <i class="fa fa-arrow-left fa-3x" id="inputBtn7"></i>
                    <i class="fa fa-arrow-right fa-3x" id="inputBtn8"></i>
                    <i class="fa fa-plus fa-2x" id="inputBtnPlus"></i>
                    <span id="inputBtn9">B</span><span id="inputBtn10">A</span>
                </div>
            </div>
        </div>
    </aside>

    <!-- Map -->
    <section id="contact" class="map bg-primary">
        <!--<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d33123.59380655086!2d119.30237864631508!3d26.075727178178443!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-CN!2s!4v1502093270753" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>-->
        <iframe src="https://ditu.amap.com/search?query=福州&city=350100&geoobj=119.273949|26.03648|119.312444|26.069945&zoom=15" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 text-center">
                    <h4><strong>Terry Zeng</strong>
                    </h4>
                    <p>Come from China
                        <br>Fujian Fuzhou
                    </p>
                    <ul class="list-unstyled">
                        <li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:TerryZ@foxmail.com">terryz@foxmail.com</a><br>
                        <a href="mailto:terryzeng5@gmail.com" >terryzeng5@gmail.com</a>
                        </li>
                    </ul>
                    <br>
                    <ul class="list-inline">
                        <li>
                            <a href="https://github.com/TerryZ" target="_blank"><i class="fa fa-github fa-fw fa-3x"></i></a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/terry.zeng.35762" target="_blank"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
                        </li>
                        <li>
                            <a href="https://twitter.com/Terry_05" target="_blank"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
                        </li>
                        <li>
                            <a href="https://plus.google.com/+ZengTerry" target="_blank"><i class="fa fa-google-plus fa-fw fa-3x"></i></a>
                        </li>
                        <li>
                            <a href="http://weibo.com/tz05" target="_blank"><i class="fa fa-weibo fa-fw fa-3x"></i></a>
                        </li>
                    </ul>
                    <hr class="small">
                    <p class="text-muted">Copyright &copy; Terry 2016 - 2017</p>
                </div>
            </div>
        </div>
        <a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
    </footer>

<!-- jQuery -->
<script type="text/javascript" src="lib/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="lib/bootstrap/3.3.7/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/bdialog/b.dialog.js"></script>
<!-- Custom Theme JavaScript -->
<script type="text/javascript">
// Scrolls to the selected menu item on the page
$(function() {
    $('a[href*="#"]:not([href="#"],[data-toggle],[data-target],[data-slide])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 300);
                return false;
            }
        }
    });
    
 	// Closes the sidebar menu
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    
    $('a','#sidebar-wrapper').not('#menu-close').click(function(){
    	$("#menu-close").click();
    });
    
	//#to-top button appears after scrolling
    var fixed = false;
    $(document).scroll(function() {
        if ($(this).scrollTop() > 250) {
            if (!fixed) {
                fixed = true;
                // $('#to-top').css({position:'fixed', display:'block'});
                $('#to-top').show("slow", function() {
                    $('#to-top').css({
                        position: 'fixed',
                        display: 'block'
                    });
                });
            }
        } else {
            if (fixed) {
                fixed = false;
                $('#to-top').hide("slow", function() {
                    $('#to-top').css({
                        display: 'none'
                    });
                });
            }
        }
    });
    // Disable Google Maps scrolling
    // See http://stackoverflow.com/a/25904582/1607849
    // Disable scroll zooming and bind back the click event
    var onMapMouseleaveHandler = function(event) {
        var that = $(this);
        that.on('click', onMapClickHandler);
        that.off('mouseleave', onMapMouseleaveHandler);
        that.find('iframe').css("pointer-events", "none");
    };
    var onMapClickHandler = function(event) {
	    var that = $(this);
	    // Disable the click handler until the user leaves the map area
	    that.off('click', onMapClickHandler);
	    // Enable scrolling zoom
	    that.find('iframe').css("pointer-events", "auto");
	    // Handle the mouse leave event
	    that.on('mouseleave', onMapMouseleaveHandler);
	};
	// Enable map zooming with mouse scroll when the user clicks the map
    $('.map').on('click', onMapClickHandler);
    var result = '38,38,40,40,37,39,37,39,66,65',keyArr = [],acceptInput = true;
    var inputError = function () {
        //$('[id^="inputBtn"]')
        var btns =  $('.rightInput');
        if(btns.size() === 0) return;
        acceptInput = false;
        keyArr = [];
        btns.removeClass('rightInput').addClass('wrongInput');
        setTimeout(function () {
            btns.removeClass('wrongInput');
            acceptInput = true;
        },2000);
    };
    $(document).keydown(function(e){
        var key = e.keyCode;
        if(!acceptInput || result.indexOf(key) === -1) return;
        e.stopPropagation();
        e.preventDefault();
        if(result.indexOf(key) !== -1) keyArr.push(key);
        else {
            inputError();
            return;
        }
        var iptstr = keyArr.join();
        if(result.indexOf(iptstr) === -1) {
            inputError();
            return;
        }else{
            if(result.substring(0,iptstr.length) === iptstr){
                $('#inputBtn' + keyArr.length).addClass('rightInput');
                if(keyArr.length > 8 && !$('#inputBtnPlus').hasClass('rightInput'))
                    $('#inputBtnPlus').addClass('rightInput');
            }
        }
        if(result === iptstr){
            acceptInput = false;
            bDialog.alert('这都被你发现，还试出来了，算你厉害！',function(){
                keyArr = [];
                $('.rightInput').removeClass('rightInput');
                acceptInput = true;
            },{
                messageType : 'success'
            })
        }
    });
});

</script>
<!-- github官方提供的按钮方式 -->
<!--
<script async defer src="https://buttons.github.io/buttons.js"></script>
-->
<script type="text/javascript" src="js/count.js" ></script>
</body>

</html>
